﻿@model SimpleHomeEditModel
@{
    var registrationMode = DIContainer.Resolve<IUserSettingsManager>().Get().RegistrationMode;

    List<string> photos = new List<string>();
    for (int i = 0; i < 3; i++)
    {
        photos.Add(Tunynet.Utilities.WebUtility.ResolveUrl(string.Format("~/Themes/Channel/Default/Appearances/Default/Images/spb-intro{0}-bg.jpg", i + 1)));
    }
    photos.RemoveAt(0);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="spb-welcome-html" xmlns="http://www.w3.org/1999/xhtml">
@using (Html.BeginHead())
{
    Html.IncludeCombresScript(PageResourceType.CSS, "siteCss");
    Html.IncludeCombresScript(PageResourceType.JS, "jqueryJs", ResourceRenderPriority.First);
    //Html.IncludeCombresScript(PageResourceType.JS, "FormJs");
    //Html.IncludeCombresScript(PageResourceType.JS, "ImageJs");
    //Html.IncludeCombresScript(PageResourceType.JS, "CodeHighlighterJs");
    //Html.IncludeCombresScript(PageResourceType.JS, "UnobtrusiveJs", ResourceRenderPriority.Last);
    @*<style type="text/css">
        html, body { width: 100%; height: 100%; overflow: hidden; }
    </style>*@
    <link rel="stylesheet" type="text/css" media="all" href="/Scripts/mootools/css/lanrenzhijia.css" />
    <link rel="stylesheet" type="text/css" media="all" href="/Scripts/mootools/css/background-images.css" />
}

<!--[if IE 6]>
<script type="text/javascript" src="@(Tunynet.Utilities.WebUtility.ResolveUrl("~/Scripts/jquery/DD_belatedPNG/jquery.DD_belatedPNG-0.0.8a.js"))"></script>
<![endif]-->
<body class="spb-welcome-page">
    <div class="spb-welcome-area">
        <div class="spb-welcome-bg" id="photoContainer" data-photos="@Json.Encode(photos)">
            <img id="body_background_imag" src="@(Tunynet.Utilities.WebUtility.ResolveUrl("~/Themes/Channel/Default/Appearances/Default/Images/spb-intro1-bg.jpg"))" />
        </div>

        <div class="spb-welcome-wrap" id="loginBody" style="display: none;">
            <div class="spb-welcome-profile">
                @*<div class="spb-welcome-logo">
                    <h1>爱驿站</h1>
                </div>*@
                <div class="spb-welcome-slogan">
                    <p>
                        爱在驿站，爱驿站
                    </p>
                </div>
            </div>
            @using (Html.BeginForm("Login", "Account", FormMethod.Post))
            {
                <div class="spb-welcome-login">
                    <div class="spb-welcome-id">
                        <div class="spb-welcome-textbox" style=" margin-bottom:10px;">
                            @Html.TextBoxFor(n => n.UserName, new { @class = "tn-textbox tn-border-gray" })
                        </div>
                        <div class="spb-welcome-textbox">
                            @Html.TextBoxFor(n => n.Password, new { type = "password", @class = "tn-textbox tn-border-gray" })
                        </div>
                        <div class="spb-welcome-option">
                            <span class="spb-welcome-remember">
                                
                                @Html.CheckBoxFor(n => n.RememberPassword, new { @class = "tn-checkbox" })
                                <label for="RememberPassword">
                                    记住密码
                                </label>
                                
                            </span>
                            
                        </div>
                        <div class="spb-welcome-btn">
                            <div class="spb-welcome-login-btn">
                                @Html.Button("登录", ButtonTypes.Submit, HighlightStyles.Primary, ButtonSizes.Large)
                            </div>
                            <p class="spb-welcome-look">
                                @if (registrationMode == RegistrationMode.All)
                                {
                                    <a class="spb-welcome-link" tabindex="-1" href="@SiteUrls.Instance().Register()">注册帐户</a>
                                }
                                <a tabindex="-1" href="@SiteUrls.Instance().SiteHome()">随便看看</a>
                                <a class="spb-welcome-link" tabindex="-1" href="@SiteUrls.Instance().FindPassword()">忘记密码</a>
                            </p>

                        </div>
                        <div class="spb-welcome-option">
                            
                            @{
                            IEnumerable<AccountType> accountTypes = new AccountBindingService().GetAccountTypes(true);
                            if (accountTypes != null && accountTypes.Count() > 0)
                            {


                                <div class="spb-welcome-open-id">
                                    <span class="spb-welcome-text">第三方帐号登录：</span>
                                    @{
                                foreach (var accountType in accountTypes)
                                {
                                    <a tabindex="-1" class="spb-welcome-open-icon spb-welcome-open-@accountType.AccountTypeKey" href="javascript:;" onclick="window.open('@SiteUrls.Instance().LoginToThird(accountType.AccountTypeKey)', 'ThirdLogin', 'width=600,height=500,menubar=0,scrollbars=0, status=1,titlebar=0,toolbar=0,location=1'); return false;"></a>
                                }
                                    }
                                </div>
                            }
                            }
                        </div>
                    </div>


                </div>
            }
            @*<div class="spb-welcome-footer">
                <p>
                    Powered by <a href="" target="_blank" title="爱驿站官网">爱驿站</a>  Inc.
                </p>
            </div>*@

        </div>
        <!-- 中间文字-->
        <div id="slideshow-text">
            <h2><span class="f_red">专业推荐</span> ，精准高效，我们就是缘分的搬运工</h2>
        </div>
        <!-- 中间文字结束-->
        <!--方格图-->
        <div id="slideshow-wrapper">
            <div id="slideshow-pattern" class=class> </div>
            <div id="slideshow-border-top">
                <div id="gallery-slider-wrapper">
                    <div id="gallery-slider">
                        <div id="slider-controls"> <a href="javascript: void(0)" id="slider-control-left">left</a><a href="javascript: void(0)" id="slider-control-right">right</a></div>
                        <div id="slider-images-wrapper">
                            <ul id="slider-main-ul">
                                <li>
                                    <ul>
                                        <li class="type-3">
                                            <a class="article-icon" title="选一种状态，让自己活的无法替代" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>选一种状态，让自己活的无法替代</strong>要你奔跑，这个世界就会跟着你奔跑，只要你停驻，这个世界就会舍弃你独自奔跑。唯有你确定一个方向，使劲的跑起来，这个世界会为你而让路。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="298" width="318" src="/Scripts/mootools/images/1.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="那句我喜欢你，被谁遗失在流年里" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>那句我喜欢你，被谁遗失在流年里</strong><em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/2.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="不要有一丝忧伤，好吗？ " href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>不要有一丝忧伤，好吗？ </strong><em class="more">
                                                        Read more
                                                        &raquo;
                                                    </em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/3.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li class="type-1">
                                            <a class="article-icon" title="我知道，我们不会有结果" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>我知道，我们不会有结果</strong><em class="more">
                                                        Read more
                                                        &raquo;
                                                    </em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/4.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="幸福背后" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>幸福背后</strong><em class="more">Read more &raquo;</em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/5.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-2">
                                            <a class="article-icon" title="我许你，一世安" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>我许你，一世安</strong>嗅觉，失控，闻不到这个清晨各奔东西的味道，终究还是走到曲终人散的地步
                                                    听老人说，留下的那个是善后者，以及承受者。而如今，最后留下的是我一个人的狂欢<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/6.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-2">
                                            <a class="article-icon" title="1000个门组成的艺术 " href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>1000个门组成的艺术 </strong>韩国首尔有一栋10层楼高建筑叫Doors ，之所以叫Doors
                                                    那是因为这栋建筑外墙是由1000个回收再利用的彩色的门契合而成的。这个构思是韩国艺术家Choi Jeong-Hwa提出来的。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/7.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li class="type-2">
                                            <a class="article-icon" title="国内爱情微电影《回到终点》" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>国内爱情微电影《回到终点》</strong>这是一部学生作品，片子剧情取材自网上短篇《一对小夫妻离婚後的三十天生活》，讲述了一对小夫妻分手之后的同居生活。曾经一起生活了3年的夫妻，因各自的想法不同而分开，同居的生活能否挽救一段枯萎的爱情？<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/8.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-3">
                                            <a class="article-icon" title="想送你首歌 无论多么悲伤还是多么快乐" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>想送你首歌 无论多么悲伤还是多么快乐</strong>想送你首歌，无论一世繁华还是淡然静默。
                                                    想送你首歌，无论多么悲伤还是多么快乐。想送你首歌，无论压力多重，笑容多从容。想送你首歌，告诉你们每一个，我都很珍惜。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="298" width="318" src="/Scripts/mootools/images/9.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li class="type-3">
                                            <a class="article-icon" title="我想结婚" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>我想结婚</strong>如果遇见这样的男人，我也想结婚。遇见他之前，我也要让自己变得更美好。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="298" width="318" src="/Scripts/mootools/images/10.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="你是我的星星" href="htt">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>你是我的星星</strong><em class="more">Read more &raquo;</em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/11.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="只要你不嫌弃我，我就不嫌弃你" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>只要你不嫌弃我，我就不嫌弃你</strong><em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/12.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li class="type-1">
                                            <a class="article-icon" title="不能叫出口的名字 " href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>不能叫出口的名字 </strong><em class="more">
                                                        Read more
                                                        &raquo;
                                                    </em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/13.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-1">
                                            <a class="article-icon" title="突然不想走" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>突然不想走</strong><em class="more">Read more &raquo;</em>
                                                </span><img height="148" width="158" src="/Scripts/mootools/images/14.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-2">
                                            <a class="article-icon" title="红眼睛幽幽的看着这孤城 如同苦笑挤出的高兴" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>红眼睛幽幽的看着这孤城 如同苦笑挤出的高兴</strong>我们坐在沙面公园的椅子上时，太阳已经静悄悄的落在欧式建筑的后面了，绿树覆盖，天失去了暖黄色后过渡到了好像蒙上一层浅灰蓝，我们的左边坐着一位女生<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/15.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-2">
                                            <a class="article-icon" title="魔女宅急便插画" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>魔女宅急便插画</strong>相信同学们对宫崎骏爷爷的《魔女宅急便》都不会陌生啊，这部1989年的动画电影伴随了几代人的成长。讲述了十三岁的小魔女琪琪带着宠物黑猫吉吉，在家人的祝福下展开一段修行之旅！<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/16.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li class="type-2">
                                            <a class="article-icon" title="新锐自由插画师ashley percival作品" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>新锐自由插画师ashley percival作品</strong>ashley percival是一位刚毕业不久的新锐自由插画师，他的绘画灵感多来自于大自然，另外还有他那经常灵光一现的想象力了。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="148" width="318" src="/Scripts/mootools/images/17.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                        <li class="type-3">
                                            <a class="article-icon" title="那些被时光碾过的破碎" href="">
                                                <span>
                                                    <div class="icon"> </div>
                                                    <strong>那些被时光碾过的破碎</strong>记忆总是忙碌到忘却了具体的时间，记住的便是那年，那月，那天，那时。
                                                    那时我们说的永不分离，就这样被时光隔离开来。我像只迷路的羔羊，在记忆中跌跌撞撞寻找来时的方向。<em class="more">
                                                        Read
                                                        more &raquo;
                                                    </em>
                                                </span><img height="298" width="318" src="/Scripts/mootools/images/18.jpg" alt="Please add picture" />
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div id="slider-bottom-controls" style="display:none">
                            <a id="slider-scroll-left" href="javascript: void(0);" title="Scroll left"> left</a>
                            <div id="slider-scroll">
                                <div class="knob"> </div>
                            </div>
                            <a id="slider-scroll-right" href="javascript: void(0);" title="Scroll right"> right</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--方格图结束-->
        <!-- 聊天对象开始  -->
        <div id="authentication">
            <h2>聊天对象<span class="f_red">100%认证</span> ，坚决对虚假信息说NO</h2>
            <p><img src="/Scripts/mootools/images/authentication.jpg" /></p>
        </div>
        <div id="discussion">
            <h2>谈恋爱，谈到世界充满爱，<span class="f_red">话题讨论</span> 找到三观一致的人</h2>
            <p><img src="/Scripts/mootools/images/discussion.jpg" /></p>
        </div>
        <!-- 聊天对象结束-->
        <!-- 手机客户端开始-->
        <div id="client">
            <h2>爱驿站<span class="f_red">手机客户端</span> ，随时随地缘分不断</h2>
            <div class="mobile fn-clear">
                <p><img src="/Scripts/mootools/images/mobile.jpg" /></p>
            </div>
        </div>
        <!-- 手机客户端结束-->
        <!-- 底部开始-->
        <div id="homefooter">
            联系地址：湖北省<br />
            Copyright©2015   版权所有：爱驿站
        </div>
        <!-- 底部结束 -->
    </div>
</body>
</html>

<script type="text/javascript" language="javascript">

    var jq = $.noConflict();
    jq(document).ready(function () {
        jq("#body_background_imag").data("imgWidth", jq("#body_background_imag").width());
        jq("#body_background_imag").data("imgHeight", jq("#body_background_imag").height());

        jq("#body_background_imag").load(function () {
            jq("#body_background_imag").data("imgWidth", jq("#body_background_imag").width());
            jq("#body_background_imag").data("imgHeight", jq("#body_background_imag").height());
            bodyReSize(jq("#photoContainer img:first"));
        });

        setTimeout(function () {
            jq("#loginBody").fadeIn(1000);
        }, 800);

        //点击提交按钮
        jq("button#login-button-submit").click(function () {
            jq(this).parents("form").submit();
        });

        //响应回车事件
        jq("input").keydown(function (e) {
            if (e.keyCode == 13) {
                jq(this).parents("form").submit();
            }
        });

        //窗口改变大小
        jq(window).resize(function () {
            bodyReSize(jq("#photoContainer img:first"));
        });

        //$("#body_background_imag").data("imgWidth", $("#body_background_imag").width());

        //$("#body_background_imag").data("imgHeight", $("#body_background_imag").height());

       bodyReSize(jq("#photoContainer img:first"));
       playPhoto();

        //jq("#body_background_imag").load(function () {
        //    bodyReSize(jq("#body_background_imag"));
        //    jq("#body_background_imag").data("imgWidth", jq("#body_background_imag").width());
        //    jq("#body_background_imag").data("imgHeight", jq("#body_background_imag").height());
        //});

        //背景图片自适应高度
        function bodyReSize($img, fun) {
            var imgHeight = $img.data("imgHeight");
            var imgWidth = $img.data("imgWidth");
            var isHeight = (imgWidth / imgHeight) > (jq(window).width() / jq(window).height());
            $img.width(isHeight ? "auto" : jq(window).width());
            //$img.height(isHeight ? jq(window).height() : "auto");
            $img.height("500px");

            if (isHeight) {
                $img.css({ "margin-top": "0px" });
              //  $img.css({ "margin-left": (jq(document.body).width() - jq(document.body).height() / (imgHeight / imgWidth)) / 2 + "px" });
                $img.css({ "margin-left": "0px" });
            } else {
                $img.css({ "margin-top": (jq(document.body).height() - jq(document.body).width() * (imgHeight / imgWidth)) / 2 + "px" });
                $img.css({ "margin-left": "0px" });
            }
            if (fun) {
                fun();
            }
        }

        //背景图片的自动切换
        var photoUrls = jq("#photoContainer").data("photos");

        if (photoUrls.length) {
            //加载图片
            jq(photoUrls).each(function (i) {
                loadPhoto(photoUrls[i]);
            });
        }

        //加载图片
        function loadPhoto(src) {
            var img = jq("<img style='display:none'>");

            img.load(function () {
                jq("#photoContainer").append(img);
                img.data("imgHeight", img.height());
                img.data("imgWidth", img.width());
            });

            img.attr("src", src);
        }

        //尝试播放下一张图片
        function playPhoto() {
            if (jq("#photoContainer").children().length > 1) {
                bodyReSize(jq("#photoContainer img:first"), function () {

                    jq("#photoContainer img:first").fadeOut(700, function () {
                        jq("#photoContainer img").hide();
                        jq(this).appendTo(jq("#photoContainer"));
                        setTimeout(function () {
                            bodyReSize(jq("#photoContainer img:first"), function () {
                                jq("#photoContainer img:first").fadeIn(700);
                            });
                        }, 10);
                    });

                });
            }
        }

        //照片切换的事件，最起码要3500+ 推荐4000以上
        setInterval(playPhoto, 15000);
    });
</script>
<script type="text/javascript" src="/Scripts/mootools/js/mootools.js"></script>
<script type="text/javascript" src="/Scripts/mootools/js/duotive-slider-gallery.js"></script>
<script type="text/javascript" src="/Scripts/mootools/js/lrzj.js"></script>